<template>
	<div class="newPage-password">
		<x-header :left-options="{backText: ''}" class="newPage-head">密码设置</x-header>
		<div class="status">
			<img src="../../assets/msg-imgs/msh_role07.png" />
			<p>用六位数字去保护五位数的款，扎心了</p>
		</div>
		<div class="input-pass">
			<div>
				<p>交易密码为6位数字</p>
				<div style="position:relative">
					<div class="show-number"></div>
					<x-input type="number" :max="6" class="num"></x-input>
				</div>
			</div>
			<div>
				<p>重复6位数字密码</p>
				<div style="position:relative;">
					<div class="show-number"></div>
					<x-input type="number" :max="6" class="num"></x-input>
				</div>
			</div>
			<div>
				<span class="error">密码不一致请重新输入</span>
			</div>
		</div>
	</div>
</template>

<script>
	import { XHeader, XInput, Group, Cell } from 'vux'
	export default {
		components: {
	      XHeader,
	      XInput,
	      Group,
	      Cell
	    },
	    created(){
	      document.title = '马上花';
	    },
	    data () {
	      return {
	        show: false,
	        token: ''
	      }
	    }
	}
</script>

<style lang="less">
	@import '../styles/main.less';
	body {
		background: #F2F2F2;
	}
	.newPage-password {
		.status {
			text-align: center;
			padding: .2rem 0;
			background-color: #F2F2F2;
			p {
				font-size: .28rem;
				margin-top: .1rem;
			}
		}
		.input-pass {
			text-align: center;
			background-color:#fff;
			padding: .3rem 0 .4rem;
			p {
				color: #9B9B9B;
				font-size: .24rem;
			}
			.show-number {
				width: 5.38rem;
				height: .96rem;
				background: url("../../assets/msg-imgs/line.png") center center no-repeat;
				background-size: 5.38rem .96rem;
				margin:0 auto;
			}
			.num {
				display:block;
				width: 5.38rem;
				height: .96rem;
				position:absolute;
				top:0;
				left:50%;
				border: none;
				margin-left: -2.69rem;
				z-index: 2;
				opacity: 0;
				padding: 0;
			}
			span.error {
				display: block;
				margin-top: .2rem;
				font-size: .24rem;
				color:#F85656;
			}
		}
	}
</style>